<template>
<div class="city_body">
    <div ref='box' class="city_list" @scroll="scrollEvent">
        <div class="city_hot">
            <h2>热门城市</h2>
            <ul class="clearfix">
                <li v-for="city in hotCities" :key="city.id" @click="handlerToCity(city.name,city.id)">
                    {{city.name}}
                </li>
            </ul>
        </div>
        <div class="city_sort">
            <div v-for="cityGroup in allCities" :key="cityGroup.index">
                <h2 ref='h2'>{{cityGroup.index}}</h2>
                <ul> 
                    <li v-for="city in cityGroup.list" :key="city.id" 
                    @click="handlerToCity(city.name,city.id)">
                        {{city.name}}
                    </li>
                </ul>
            </div>
            
        </div>
    </div>
    <div class="city_index">
        <ul>
            <!-- 
                :class='{active:index === activeIndex}'
                是给选中的导航字母加上这个类名，以便于看点中的是哪一个
             -->
            <li v-for="(cityGroup,index) in allCities"
                :key="cityGroup.index"
                @click="clickEvent(index)"
                :class='{active:index === activeIndex}'
            >
                {{cityGroup.index}}
            </li>
        </ul>

    </div>
</div>
</template>

<script>
export default {
    name:'City',
    data(){
        return{
            hotCities:[],
            allCities:[],
            activeIndex:-1,
            heightList:[]
        }
    },
    async created(){
        let hotCities = window.localStorage.getItem('hotCities');
        let allCities = window.localStorage.getItem('allCities');
        if(hotCities&&allCities){
            this.hotCities = JSON.parse(hotCities);
            this.allCities = JSON.parse(allCities);
            return;
        }
        let res = await this.$axios.get('/api/city')
        // console.log(res);
        // 第一次请求数据
        window.localStorage.setItem('hotCities',JSON.stringify(res.data.hot));
        window.localStorage.setItem('allCities',JSON.stringify(res.data.cities));
       
        this.hotCities = res.data.hot;
        this.allCities = res.data.cities;
        this.$nextTick(()=>{
            this.$refs.h2.forEach(dom=>{
                this.heightList.push(dom.offsetTop)
            })
            // scrollHeight内容的高度，不是容器的高度
            this.heightList.push(this.$refs.box.scrollHeight);
        })
    },
    methods:{ 
        clickEvent(index){
            // console.log("点击事件"+index);
            this.activeIndex = index;
            this.$refs.box.scrollTop = this.$refs.h2[index].offsetTop
        },
        scrollEvent(){
            var scrollTop = this.$refs.box.scrollTop;
            for(var i=0;i<this.heightList.length-1;i++){
                if(scrollTop<this.heightList[0]){
                    this.activeIndex = -1;
                    return;
                }
                if(scrollTop>=this.heightList[i]&&scrollTop<this.heightList[i+1]){
                    this.activeIndex = i;
                    return;
                }
            }
        },
        // 点击城市修改vueX里的数据，并跳转nowplaying
        handlerToCity(nm,id){
            // 修改vuex里面的数据
            this.$store.commit('city/CITY_INFO',{
                nm,
                id
            })
            // 点击跳转 nowplaying
            this.$router.push('./movie/nowplaying')
        }
    }
}
</script>

<style scoped>
#content .city_body{ margin-top: 45px; display: flex; width:100%; position: absolute; top: 0; bottom: 0;}
.city_body .city_list{ flex:1; overflow: auto; background: #FFF5F0;}
.city_body .city_list::-webkit-scrollbar{background-color:transparent;width:0}
.city_body .city_hot{ margin-top: 20px;}
.city_body .city_hot h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
.city_body .city_hot ul li{ float: left; background: #fff; width: 29%; height: 33px; margin-top: 15px; margin-left: 3%; padding: 0 4px; border: 1px solid #e6e6e6; border-radius: 3px; line-height: 33px; text-align: center; box-sizing: border-box;}
.city_body .city_sort div{ margin-top: 20px;}
.city_body .city_sort h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
.city_body .city_sort ul{ padding-left: 10px; margin-top: 10px;}
.city_body .city_sort ul li{ line-height: 30px; line-height: 30px;}
.city_body .city_index{ width:20px; display: flex; flex-direction:column; justify-content:center; text-align: center; border-left:1px #e6e6e6 solid;}
.city_body .city_index ul li.active {color:#ffffff; background: #E54847}
</style>